<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span style="
    font-size: x-large;
    margin-right: 5px;
    font-weight: bolder;
    vertical-align: middle;"
        >{{ form.reportGroupName }}</span>
        <span style="color: #606266">{{ form.reportPeoName }}</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ form.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ form.updateTime }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">报工信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报工人员">
              {{ form.reportPeoName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报工数量">
              {{ form.reportCompleteNum }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报工时间" :span="2">
              {{ form.reportTime }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">任务信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务名称">
              {{ form.reportTCodeName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务编号">
              {{ form.reportTCode }}
            </el-descriptions-item>

            <el-descriptions-item :labelStyle="descLabelStyle" label="生产车间">
              {{ form.reportWCellName }}
            </el-descriptions-item>

            <el-descriptions-item :labelStyle="descLabelStyle" label="工艺路线">
              {{ form.reportRouteName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工序名称">
              {{ form.reportProcedureName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工序编号">
              {{ form.reportProcedure }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="班组">
              {{ form.reportGroupName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务负责人" :span="2">
              {{ form.reportWMangerName }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">工单信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单名称">
              {{ form.reportOCodeName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单编号">
              {{ form.reportOCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品名称">
              {{ form.gbsGood ? form.gbsGood.pdName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品编号">
              {{ form.reportPCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="规格型号">
              {{ form.gbsGood ? form.gbsGood.pdSpecType : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品类型">
              {{ form.gbsGood && form.gbsGood.gbsGoodClass ? form.gbsGood.gbsGoodClass.gcName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="单位">
              {{ form.gbsGood && form.gbsGood.gbsGoodUnit ? form.gbsGood.gbsGoodUnit.guName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM">
              {{ form.reportBom }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM">
              {{ form.reportBomVersion }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="批次">
              {{ form.reportOBatch }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="质检内容">
          <el-descriptions :colon="false" :column="2">
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">检验单信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验单名称">
              {{ form.reportQcName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验单编号">
              {{ form.reportQcCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验类型">
              <dict-tag :options="getQualityType" :value="form.reportType" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验日期">
              {{ form.reportTime }}
            </el-descriptions-item>
            <!--            <el-descriptions-item :labelStyle="descLabelStyle" label="检验部门">-->
            <!--              {{ form.createTime }}-->
            <!--            </el-descriptions-item>-->
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验人" :span="2">
              {{ form.reportQcPeoName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="备注" :span="2">
              {{ form.reportDesc }}
            </el-descriptions-item>

            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">检验结果</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="合格数">
              {{ form.reportGood }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="不合格数">
              {{ form.reportQcNum - form.reportGood }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="合格率">
              {{ qualityRate }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验结果">
              <dict-tag :options="getQualityYesNo" :value="form.reportResult" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--    关闭按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" />
  </div>
</template>

<script>
import { getProWorkReport } from '@/api/yyj/pro/workReport'
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import Decimal from 'decimal.js'

export default {
  name: 'WorkReportDetail',
  components: { MyConfirmBtnGroup },
  dicts: ['qc_quality_type', 'yyj_common_status', 'qc_quality_yes_no'],
  data() {
    return {
      backPage: '/pro/workReport',
      form: {},
      descLabelStyle: {
        minWidth: '120px !important'
      }
    }
  },
  computed: {
    getQualityType() {
      return this.dict.type.qc_quality_type
    },
    getStatus() {
      return this.dict.type.yyj_common_status
    },
    getQualityYesNo() {
      return this.dict.type.qc_quality_yes_no
    },
    qualityRate() {
      if (!this.form || !this.form.reportGood || !this.form.reportQcNum) {
        return ''
      }
      return new Decimal(this.form.reportGood).dividedBy(this.form.reportQcNum).mul(100).toFixed(2) + '%'
    }
  },
  created() {
    const reportCode = this.$route.params.reportCode
    this.getDetailInfo(reportCode)
  },
  methods: {
    // 获取此页面的详细信息
    async getDetailInfo(reportCode) {
      const res = await getProWorkReport(reportCode)
      console.log(' res ', res)
      this.form = res.data
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/detail";
</style>
